<template>
	<div class="home">
		<nav-tab>
			<header-item>
				<div class="header-nav1" slot="header-img"  @click="saoma">
					<img src="@/assets/image/header/ew.png" />
					<div>扫一扫</div>
				</div>
				<div class="header-nav2" slot="header-sc"  @click="search">
					<img src="@/assets/image/header/sc.png" />
					<input type="text" class="input" placeholder="理财有风险,投资须谨慎" />
				</div>
				<div class="header-nav3" slot="header-xingx" @click="news">
					<img src="@/assets/image/header/xf.png">
					<div>消息</div>
				</div>
			</header-item>
		</nav-tab>
		<!-- 轮播图 -->
		<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
			<van-swipe-item><img src="../../assets/image/home/lb1.png" /></van-swipe-item>
			<van-swipe-item><img src="../../assets/image/home/lb1.png" /></van-swipe-item>
			<van-swipe-item><img src="../../assets/image/home/lb1.png" /></van-swipe-item>
			<van-swipe-item><img src="../../assets/image/home/lb1.png" /></van-swipe-item>
		</van-swipe>
		<div>
			<ul class="guig">
				<li v-for="(item,index) in lisArr" :key="index" class="li-item">
					<img :src="item.img" />
					<div>{{item.name}}</div>
				</li>
			</ul>
		</div>
		<div class="toutiao">
			<div class="tis">小招头条</div>
			<div class="nr">5年收益翻倍，三招选出好基金</div>
		</div>
		<!-- 为您推荐 -->
		<div class="tuijian">
			<van-cell>
				<div slot="title" class="tuijian-title">为你推荐</div>
			</van-cell>
			<div class="van-cardt" @click="details">
				<div class="thumb-img">
					<div>4.08<span>%</span></div>
					<div class="nianh">上期年化</div>
				</div>
				<div class="thumb-right">
					<div class="thumb-title">日益月鑫60天</div>
					<div class="desc">招行明星产品 5万起购 到期资金自动到账</div>
				</div>
			</div>
			<div class="van-cardt" @click="details">
				<div class="thumb-img">
					<div>4.08<span>%</span></div>
					<div class="nianh">上期年化</div>
				</div>
				<div class="thumb-right">
					<div class="thumb-title">日益月鑫60天</div>
					<div class="desc">招行明星产品 5万起购 到期资金自动到账</div>
				</div>
			</div>
		</div>
		<!-- 新人专区 -->
		<div class="xingren">
			<van-cell>
				<div slot="title" class="xingren-title">新人专区</div>
			</van-cell>
			<ul class="huadong">
				<li v-for="item in 5" :key="item">
					<div>新手有礼</div>
					<div class="lis">80元现金礼券免费领</div>
				</li>
			</ul>
		</div>
		<!-- 底部导航 -->
		<main-tab-item></main-tab-item>
	</div>
</template>

<script>
	import NavTab from '@/components/navtar/Header.vue'
	import HeaderItem from '@/components/navtar/HeaderItem.vue'
	import MainTabItem from '@/components/MainTabItem.vue'
	import {
		Button,
		Cell,
		CellGroup
	} from 'vant';
	import {
		Swipe,
		SwipeItem,
		Card
	} from 'vant';

	export default {
		name: 'Home',
		data() {
			return {
				lisArr: [{
						id: 1,
						name: '账户',
						img: require('@/assets/image/home/h1.png')
					},
					{
						id: 2,
						name: '转账',
						img: require('@/assets/image/home/h2.png')
					},
					{
						id: 3,
						name: '信用卡还款',
						img: require('@/assets/image/home/h3.png')
					},
					{
						id: 4,
						name: '收支',
						img: require('@/assets/image/home/h4.png')
					},
					{
						id: 5,
						name: '他行卡转入',
						img: require('@/assets/image/home/h5.png')
					},
					{
						id: 6,
						name: '借钱',
						img: require('@/assets/image/home/h6.png')
					},
					{
						id: 7,
						name: '缴费',
						img: require('@/assets/image/home/h7.png')
					},
					{
						id: 8,
						name: '摩蝎智投',
						img: require('@/assets/image/home/h8.png')
					},
					{
						id: 9,
						name: '热门活动',
						img: require('@/assets/image/home/h9.png')
					},
					{
						id: 10,
						name: '全部',
						img: require('@/assets/image/home/h10.png')
					},
				]
			}


		},
		methods: {
			search() {
				this.$router.push('/search')
			},
			saoma(){
				this.$router.push('/saoma')
			},
			news(){
				this.$router.push('/news')
			},
			details(){
				this.$router.push('/details')
			}
		},
		components: {
			NavTab,
			HeaderItem,
			MainTabItem,
			[Button.name]: Button,
			[CellGroup.name]: CellGroup,
			[Cell.name]: Cell,
			[Swipe.name]: Swipe,
			[SwipeItem.name]: SwipeItem,
			[Card.name]: Card,

		}
	}
</script>
<style lang="less" scoped>
	@mtop: 9px;

	.home {
		padding-bottom: 50px;
		background-color: #F0F0F2;
	}

	.my-swipe {
		// width: 750px;
		height: 170px;
		background-color: pink;
		margin-top: 45px;

		.van-swipe-item {
			color: #fff;
			font-size: 10px;
			line-height: 75px;
			text-align: center;
			background-color: #39a9ed;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}

	.guig {
		// width: 750px;
		height: 155px;
		background-color: white;
		display: flex;
		// justify-content: space-between;
		text-align: center;
		flex-wrap: wrap;

		.li-item {
			// flex: 1; 
			width: 65px;
			height: 77px;
			// border: 1px solid red;
			font-size: 13px;
			color: #A6A6A6;
			margin: 0px 4px;

			// font-weight: bold;
			>img {
				width: 30px;
				height: 30px;
				margin-top: 15px;
			}
		}
	}

	.toutiao {
		// width:@width;
		height: 45px;
		background-color: white;
		margin-top: @mtop ;
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;

		.tis {
			font-size: 15px;
			color: #FE2446;
			flex: 1;
		}

		.nr {
			color: #5A5A5A;
			font-size: 16px;
			flex: 3;
		}
	}

	.tuijian {
		// width: @width;
		height: 220px;
		margin-top: @mtop;
		background-color: white;

		.tuijian-title {
			font-size: 15px;
			padding: 10px 0px;
			border-bottom: 1px solid #f2f2f2;
		}

		.van-cardt {
			height: 100px;
			// margin-top: 10px;
			color: #323233;
			font-size: 0.16rem;
			background-color: #ffffff;
			display: flex;
			border-bottom: 1px solid #f2f2f2;

			.thumb-img {
				width: 100px;
				text-align: center;
				font-size: 24px;
				color: #FC505F;
				padding-top: 22px;

				span {
					font-size: 12px;
				}

				.nianh {
					font-size: 12px;
				}
			}

			.thumb-right {
				padding-left: 10px;
				padding-right: 25px;
				box-sizing: border-box;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.thumb-title {
					font-size: 16px;
					color: #383838;
				}

				.desc {
					margin-top: 7px;
					font-size: 14px;
					color: #999999;
				}
			}
		}

	}

	.xingren {
		// width: @width;
		height: 143px;
		background: #FFFFFF;
		margin-top: 55px;
		box-sizing: border-box;

		.xingren-title {
			font-size: 16px;
			color: #383838;
			// margin-bottom: 10px;
		}
             .huadong::-webkit-scrollbar{
				 display: none;
			 }
		.huadong {
			// width:@width;
			height: 90px;
			text-align: center;
			color: white;
			font-size: 21px;
			overflow-x: scroll;
			white-space: nowrap;

			li {
				width: 150px;
				height: 90px;
				background-color: #AB483C;
				padding-top: 20px;
				box-sizing: border-box;
				display: inline-block;
				margin-left: 13px;

				.lis {
					font-size: 14px;
				}
			}
		}
	}
</style>
